<template>
	<div style="width: 100%; margin: 0px auto; position: absolute; display: flex;flex-direction: column; background-color: #F7F7F7;">
		<div class="header">
			<div style="flex: 1;">
				<h1>EasyAdmin系统</h1>
			</div>
			<div>
				<div style="font-size: 14px; color: #888; text-align: center; padding-top:10px;">全国服务热线</div>
				<div style="font-size: 30px;color:#ffaa00">17633053590</div>
			</div>
		</div>
		<div style="background-color: coral; height:45px;">
			<div style="width: 1200px; margin: 0px auto; line-height: 45px; display: flex;">
				<a href="/index"><div class="navitem">首页</div></a>
				<a href="/product"><div class="navitem">产品展示</div></a>
				<a href="/about"><div class="navitem">关于我们</div></a>
			</div>
		</div>
		<div style="margin: 0px auto; overflow-y: auto;">
			<router-view></router-view>
		</div>
		<div style="background-color: #383838; margin: 0px auto;width: 100vw; height: 300px;">
			<div style="width: 1200px;margin: 0px auto;">
				北京安之谷科技有限公司
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				
			}
		},
		mounted() {
			document.title=this.$router.currentRoute.meta && this.$router.currentRoute.meta.title;
		},
		watch: {
			$route() {
				document.title=this.$router.currentRoute.meta && this.$router.currentRoute.meta.title;
			}
		}
	}
</script>
<style scoped>
	a {
		color: #FFF;
		text-decoration: none;
	}

	.header {
		display: flex;
		margin: 0px auto;
		min-width: 1200px;
	}

	.navitem {
		color: #FFF;
		width: 90px;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		
	}
</style>